<template>
    <div class="content-inner landing">
        <div class="map">
            <div id="amap" class="amap-box"></div>
        </div>
        <div class="meters panel">
            <div>
                <el-popover
                    placement="bottom"
                    trigger="manual">
                    <div class="pop-content statistics">
                        <div>
                        </div>
                    </div>
                    <div slot="reference" @click="gotoPage('bill')">
                        <i class="el-icon-coin primary "></i>
                        <div>
                            <div class="num primary">{{ statistics.price }}</div>
                            <div class="label">订单总额</div>
                        </div>
                    </div>
                </el-popover>
            </div>
            <div>
                <el-popover
                    placement="bottom"
                    trigger="manual">
                    <div class="pop-content statistics">
                        <div>
                        </div>
                    </div>
                    <div slot="reference">
                        <i class="el-icon-ship secondary"></i>
                        <div>
                            <div class="num secondary">{{ statistics.msg_total }}</div>
                            <div class="label">发布消息数</div>
                        </div>
                    </div>
                </el-popover>
            </div>
            <div>
                <el-popover
                    placement="bottom"
                    trigger="manual">
                    <div class="pop-content statistics">
                        <div>
                        </div>
                    </div>
                    <div slot="reference" @click="gotoPage('logs')">
                        <i class="el-icon-receiving primary"></i>
                        <div>
                            <div class="num primary">{{ statistics.log_total }}</div>
                            <div class="label">操作日志数</div>
                        </div>
                    </div>
                </el-popover>
            </div>
            <div>
                <el-popover
                    placement="bottom"
                    trigger="manual">
                    <div class="pop-content statistics">                        
                    </div>
                    <div slot="reference">
                        <i class="el-icon-bangzhu secondary"></i>
                        <div>
                            <div class="num secondary">{{ statistics.note_total }}</div>
                            <div class="label">事程数</div>
                        </div>
                    </div>
                </el-popover>
            </div>
        </div>
        <div class="matrix" >
            <div class="left">
                <div class="panel">
                    <div class="header">
                        <i class="el-icon-s-management"><span>用户类型分布</span></i>
                    </div>
                    <v-chart class="chart" :option="opt_line_graph" autoresize />
                </div>
                <div class="panel">
                    <div class="header">
                        <i class="el-icon-s-management"><span>近30日注册数</span></i>
                    </div>
                    <v-chart class="chart" :option="opt_step_line" style="width: 75%;" autoresize />
                </div>
            </div>
            <div class="center">
                <div class="meters-container panel">
                    <div class="meters">
                        <div>
                            <el-popover
                                placement="bottom"
                                trigger="manual">
                                <div class="pop-content statistics">
                                    <div>
                                    </div>
                                </div>
                                <div slot="reference" @click="gotoPage('bill')">
                                    <i class="el-icon-coin primary "></i>
                                    <div>
                                        <div class="num primary">{{ statistics.price }}</div>
                                        <div class="label">订单总额</div>
                                    </div>
                                </div>
                            </el-popover>
                        </div>
                        <div>
                            <el-popover
                                placement="bottom"
                                trigger="manual">
                                <div class="pop-content statistics">
                                    <div>
                                    </div>
                                </div>
                                <div slot="reference">
                                    <i class="el-icon-ship secondary"></i>
                                    <div>
                                        <div class="num secondary">{{ statistics.msg_total }}</div>
                                        <div class="label">发布消息数</div>
                                    </div>
                                </div>
                            </el-popover>
                        </div>
                        <div>
                            <el-popover
                                placement="bottom"
                                trigger="manual">
                                <div class="pop-content statistics">
                                    <div>
                                    </div>
                                </div>
                                <div slot="reference" @click="gotoPage('logs')">
                                    <i class="el-icon-receiving primary"></i>
                                    <div>
                                        <div class="num primary">{{ statistics.log_total }}</div>
                                        <div class="label">操作日志数</div>
                                    </div>
                                </div>
                            </el-popover>
                        </div>
                        <div>
                            <el-popover
                                placement="bottom"
                                trigger="manual">
                                <div class="pop-content statistics">
                                    
                                </div>
                                <div slot="reference">
                                    <i class="el-icon-bangzhu secondary"></i>
                                    <div>
                                        <div class="num secondary">{{ statistics.note_total }}</div>
                                        <div class="label">事程数</div>
                                    </div>
                                </div>
                            </el-popover>
                        </div>
                    </div>
                </div>
                <div>
                    <!-- <v-chart class="chart" :option="opt_lines" autoresize />
                    <br/>
                    <br/>
                    <v-chart class="chart" :option="opt_task_period" autoresize /> -->
                </div>
            </div>
            <div class="right">
                <div class="panel">
                    <div class="header">
                        <i class="el-icon-s-management"><span>内容活跃数</span></i>
                    </div>
                    <v-chart class="chart" :option="opt_radar" style="width: 75%;" autoresize />
                </div>
                <div class="panel">
                    <div class="header">
                        <i class="el-icon-s-management"><span>负载监测</span></i>
                    </div>
                    <v-chart class="chart" :option="opt_gauge_server" autoresize />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Schart from 'vue-schart';
import bus from '../common/bus';

import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, defineComponent } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

import api from '../../api/index';
import sysdict from '../../api/sysdict';
import pageUtil from '../../utils/page';

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

var series = [
  {
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    stack: 'a',
    name: 'a'
  },
  {
    data: [10, 46, 64, '-', 0, '-', 0],
    type: 'bar',
    stack: 'a',
    name: 'b'
  },
  {
    data: [30, '-', 0, 20, 10, '-', 0],
    type: 'bar',
    stack: 'a',
    name: 'c'
  },
  {
    data: [30, '-', 0, 20, 10, '-', 0],
    type: 'bar',
    stack: 'b',
    name: 'd'
  },
  {
    data: [10, 20, 150, 0, '-', 50, 10],
    type: 'bar',
    stack: 'b',
    name: 'e'
  }
];
const stackInfo = {};
for (let i = 0; i < series[0].data.length; ++i) {
  for (let j = 0; j < series.length; ++j) {
    const stackName = series[j].stack;
    if (!stackName) {
      continue;
    }
    if (!stackInfo[stackName]) {
      stackInfo[stackName] = {
        stackStart: [],
        stackEnd: []
      };
    }
    const info = stackInfo[stackName];
    const data = series[j].data[i];
    if (data && data !== '-') {
      if (info.stackStart[i] == null) {
        info.stackStart[i] = j;
      }
      info.stackEnd[i] = j;
    }
  }
}
for (let i = 0; i < series.length; ++i) {
  const data = series[i].data;
  const info = stackInfo[series[i].stack];
  for (let j = 0; j < series[i].data.length; ++j) {
    // const isStart = info.stackStart[j] === i;
    const isEnd = info.stackEnd[j] === i;
    const topBorder = isEnd ? 20 : 0;
    const bottomBorder = 0;
    data[j] = {
      value: data[j],
      itemStyle: {
        borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
      }
    };
  }
}

const gaugeData = [
  {
    value: 20,
    name: '完美',
    title: {
      offsetCenter: ['35%', '-25%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['-10%', '-25%']
    }
  },
  {
    value: 20,
    name: '良好',
    title: {
      offsetCenter: ['35%', '3%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['-10%', '3%']
    }
  },
  {
    value: 60,
    name: '一般',
    title: {
      offsetCenter: ['35%', '30%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['-10%', '30%']
    }
  }
];

const gaugeDataServer = [
  {
    value: 20,
    name: 'CPU',
    title: {
      offsetCenter: ['-30%', '75%']
    },
    detail: {
      offsetCenter: ['-30%', '95%']
    }
  },
  {
    value: 40,
    name: '内存',
    title: {
      offsetCenter: ['30%', '75%']
    },
    detail: {
      offsetCenter: ['30%', '95%']
    }
  }
];

const axisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const dataLineGraph = axisData.map(function (item, i) {
  return Math.round(Math.random() * 1000 * (i + 1));
});
const linksLineGraph = dataLineGraph.map(function (item, i) {
  return {
    source: i,
    target: i + 1
  };
});
linksLineGraph.pop();

export default {
    name: 'dashboard',
    components: {
        VChart
    },
    provide: {
        [THEME_KEY]: 'light',
    },
    data: function() {
        return {
            source: '1',
            opt_gauge_server: {
                series: [
                    {
                        type: 'gauge',
                        anchor: {
                                show: true,
                                showAbove: true,
                                size: 18,
                                itemStyle: {
                                color: '#FAC858'
                            }
                        },
                        pointer: {
                            icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                            width: 8,
                            length: '80%',
                            offsetCenter: [0, '8%']
                        },
                        progress: {
                            show: true,
                            overlap: true,
                            roundCap: true
                        },
                        axisLine: {
                            roundCap: true
                        },
                        data: gaugeDataServer,
                        title: {
                            fontSize: 14
                        },
                        detail: {
                            width: 40,
                            height: 14,
                            fontSize: 14,
                            color: '#fff',
                            backgroundColor: 'inherit',
                            borderRadius: 3,
                            formatter: '{value}%'
                        }
                    }
                ]
            },            
            opt_line_graph: {
                title: {
                    text: '',
                    show: false
                },
                tooltip: {
                    extraCssText:'width:100px;height:60px;word-break: break-all;word-wrap: break-word;white-space:pre-wrap;'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: axisData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        type: 'graph',
                        layout: 'none',
                        coordinateSystem: 'cartesian2d',
                        symbolSize: 5, // 40
                        label: {
                            show: false
                        },
                        edgeSymbol: ['none', 'none'], // ['circle', 'arrow']
                        edgeSymbolSize: [4, 10],
                        data: dataLineGraph,
                        links: linksLineGraph,
                        lineStyle: {
                            color: '#2f4554'
                        }
                    }
                ]
            },
            opt_step_line: {
                tooltip: {
                    trigger: 'axis',
                    extraCssText:'width:100px;height:60px;word-break: break-all;word-wrap: break-word;white-space:pre-wrap;'
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '',
                        type: 'line',
                        step: 'start',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    }
                ]
            },
            opt_radar: {
                title: {
                    text: '',
                    show: false
                },
                legend: {
                    data: [''],
                    show: false
                },
                tooltip: {
                    trigger: 'item',
                    extraCssText:'width:100px;height:130px;word-break: break-all;word-wrap: break-word;white-space:pre-wrap;'
                },
                radar: {
                    // shape: 'circle',
                    indicator: [
                        { name: '阅读数', max: 500 },
                        { name: '评论数', max: 50 },
                        { name: '点赞数', max: 50 }
                    ],
                    name: {
                        textStyle: {
                            padding: [-10, -12]
                        }
                    }
                },
                series: [
                    {
                        name: '活跃数据',
                        type: 'radar',
                        data: [
                            {
                                value: [4200, 3000, 20000, 35000, 50000, 18000],
                                name: '活跃数据'
                            }
                        ],
                        areaStyle: {}
                    }
                ]
            },
            map: undefined,
            statistics: {},
            sysdict,
            timerCapsule: undefined,
            terminal: {}
        };
    },
    created() {
        
    },
    mounted() {
        var that = this;
        that.initMap();
        that.timerCapsule = setInterval(() => {
            that.getData();
        }, 3000);
        that.getData();
    },
    beforeRouteLeave(to, from, next) {
        var that = this;
        clearInterval(that.timerCapsule);
        next();
    },
    methods: {
        gotoPage(page) {
            pageUtil.gotoPage(this, page);
        },
        initMap() {
            var that = this;
            api.getTerminalList({code: 'sysrun', appInfoName: 'app_control_map_marker'}).then(res => {
                this.terminal = res.records.length ? JSON.parse(res.records[0].appInfoMeaning) : {};
                AMapLoader.load({
                    key: "1e7829e1315c5b1e66627cced53ff6af",
                    v: "1.4.15",
                    plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
                }).then((AMap) => {
                    that.map = new AMap.Map("amap", {
                        resizeEnable: true,
                        rotateEnable:false,
                        pitchEnable:false,
                        zoom: this.terminal.zoom,
                        pitch: this.terminal.pitch,
                        rotation: this.terminal.rotation,
                        viewMode:'3D',
                        expandZoomRange:true,
                        zooms: this.terminal.zooms,
                        center: this.terminal.center,
                        showLabel: false,
                        zoomEnable:false,
                        dragEnable: false
                    });

                    var marker = new AMap.Marker({
                        position: this.terminal.center,
                        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                        offset: new AMap.Pixel(this.terminal.offset[0], this.terminal.offset[1])
                    });

                    marker.setMap(that.map);
                }).catch((e) => {
                    console.log(e);
                });
            }).catch(err => {
                this.$message.error(err);
            });
        },
        getData() {
            var that = this;
            api.getCapsuleInfo({}).then(res => {
                that.statistics = res;
                that.updateMeters();
            }).catch(err => {
                that.$message.error(err);
            });
        },
        updateMeters() {
            var that = this;
            that.opt_gauge_server.series[0].data = [
                {
                    value: that.statistics.serverLoad.cpuLoad,
                    name: 'CPU',
                    title: {
                        offsetCenter: ['-30%', '75%']
                    },
                    detail: {
                        offsetCenter: ['-30%', '95%']
                    }
                },
                {
                    value: that.statistics.serverLoad.memoryLoad,
                    name: '内存',
                    title: {
                        offsetCenter: ['30%', '75%']
                    },
                    detail: {
                        offsetCenter: ['30%', '95%']
                    }
                }
            ];

            // that.opt_step_line.xAxis.data = that.statistics.user_join.time;
            // that.opt_step_line.series[0].data = that.statistics.user_join.data;

            // var readMax = that.statistics.num_items.read_num * 1.2;
            // that.opt_radar.radar.indicator[0].max = readMax;
            // that.opt_radar.radar.indicator[1].max = readMax * 0.1;
            // that.opt_radar.radar.indicator[2].max = readMax * 0.3;
            // that.opt_radar.series[0].data[0].value = [that.statistics.num_items.read_num, that.statistics.num_items.comment_num, that.statistics.num_items.like_num];

            // that.opt_line_graph.xAxis.data = that.statistics.user_info.type_items.map(m => m.extension__user_type);
            // that.opt_line_graph.series[0].data = that.statistics.user_info.type_items.map(m => m.num);
            // that.opt_line_graph.series[0].links = that.statistics.user_info.type_items.map((item, i) => {
            //     return {
            //         source: i,
            //         target: i + 1
            //     };
            // });
        }
    }
};
</script>


<style scoped>

</style>
